<template>
	<view>
		<view style="background-color: #F61B00;height: 147rpx; box-sizing:border-box;height: 130rpx; padding-top: 81rpx;">
			<image src="/static/waimai/返回@2x.png" @click="backTo()" style="margin: 0 259rpx 0 30rpx; width: 18rpx;height: 32rpx;" mode="aspectFit"></image>
			<text style="font-size: 32rpx;color: #fff;">分销员排名</text>
		</view>
		<view class="head"></view>
		<view >
			<view style="width: 690rpx;height: 1430rpx;margin: -80rpx 30rpx;background-color: #fff;border-radius: 20rpx;">
				<view style="padding: 70rpx 57rpx;font-size: 28rpx;color: #666666; display: flex;justify-content: space-between;">
					<view v-for="(item, index) in ranking" :key="index">
							<view class="scroll-tab-item" :class="{ active: rankIndex == index }" @click="rankClick(index)">
								{{ item }}
								<view class="select"></view>
							</view>
					</view>
				</view>
				<view v-if="rankIndex===0">
					<view style="font-size: 28rpx;display: flex;align-items: center;margin: 0 30rpx 47rpx;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image src="/static/组 25@2x(1).png"style="width: 63rpx;height: 63rpx;" mode="aspectFit"></image>
							<image src="" style="margin: 0 20rpx 0 10rpx; width: 74rpx;height: 74rpx;border-radius: 50%;background-color: #E5E5E5;" mode="aspectFit"></image>
							<text>吃瓜群众</text>
						</view>
						<text style="color: #F61B00;font-size: 30rpx;">¥1280</text>
					</view>
					<view style="font-size: 28rpx;display: flex;align-items: center;margin: 0 30rpx 47rpx;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image src="/static/组 25@2x.png"style="width: 63rpx;height: 63rpx;" mode="aspectFit"></image>
							<image src="" style="margin: 0 20rpx 0 10rpx; width: 74rpx;height: 74rpx;border-radius: 50%;background-color: #E5E5E5;" mode="aspectFit"></image>
							<text>吃瓜群众</text>
						</view>
						<text style="color: #F61B00;font-size: 30rpx;">¥1280</text>
					</view>
					<view style="font-size: 28rpx;display: flex;align-items: center;margin: 0 30rpx;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image src="/static/组 25@2x(2).png"style="width: 63rpx;height: 63rpx;" mode="aspectFit"></image>
							<image src="" style="margin: 0 20rpx 0 10rpx; width: 74rpx;height: 74rpx;border-radius: 50%;background-color: #E5E5E5;" mode="aspectFit"></image>
							<text>吃瓜群众</text>
						</view>
						<text style="color: #F61B00;font-size: 30rpx;">¥1280</text>
					</view>
					<view style="margin-top: 47rpx;">
						<view style="font-size: 28rpx;display: flex;align-items: center;margin: 0 30rpx 47rpx  53rpx;justify-content: space-between;">
							<view style="display: flex;align-items: center;">
								<text>4</text>
								<image src="" style="margin: 0 20rpx 0 35rpx; width: 74rpx;height: 74rpx;border-radius: 50%;background-color: #E5E5E5;" mode="aspectFit"></image>
								<text>吃瓜群众</text>
							</view>
							<text style="color: #F61B00;font-size: 30rpx;">¥1280</text>
						</view>
					</view>
				</view>
			</view>			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ranking: ['本周', '本月', '近一年', '总榜'],
			rankIndex:0
		};
	},
	methods:{
		rankClick(index){
			this.rankIndex=index
		}
	}
};
</script>

<style lang="scss">
.active{
	.select{
		display: block;		
	}
}
.select {
	display: none;
	width: 40rpx;
	height: 6rpx;
	background-color: #FF492E;
	margin-left: 10rpx;
	border-radius: 4rpx;
	margin-top: 5rpx;
}
.head{
	background: url() no-repeat;
	background-size: 100% 100%;
	height: 152rpx;
}
page{
	background-color: #F6F6F6;
}
	
</style>
